<script setup lang="ts">
import router from '@/router/index';
import { useStore } from '@/store/index';
import { computed, onMounted, ref } from 'vue';
const { user } = useStore()
const { pushStack } = useAppRouter()

const props = defineProps<{ student: Eps.studentEntity, person: Function }>()

const show = ref(false)

const student = computed(() => {
  return user.info || {}
})

onMounted(() => { })
const isLogin = computed(() => {
  return !!user.token
})

// 退出登录
function signOut() {
  show.value = false
  user.logout()
}
</script>

<template>
  <div>
    <var-button class="ml-4px" text round @click="show = !show" v-bind="$attrs">
      <var-icon class="text-[24px]!" name="menu" />
    </var-button>

    <var-popup position="left" v-model:show="show">
      <div class="w-[300px]">
        <div class="flex flex-col justify-center px-[20px] h-[170px] bg-[url(@/assets/images/material.jpg)] bg-cover">
          <var-avatar :src="student.headPortraitFile" size="large" />
          <div class="text-white">
            <div class="mt-[10px] fw-[500] text-xl">{{ student?.realName }}</div>
          </div>
        </div>

        <div class="py-[10px] px-[4px] h-[calc(var(--app-height)-170px)]">
          <var-space direction="column">
            <!-- <var-cell v-if="!isLogin" class="rounded-[4px]" title="登录/注册" v-ripple @click="pushStack('/sign-in')"> -->
            <var-cell v-if="!isLogin" class="rounded-[4px]" title="登录/注册" v-ripple
              @click="router.push('/stacks/sign-in')">
              <template #icon>
                <var-icon class="mr-[20px]" name="account-circle" />
              </template>
            </var-cell>
            <var-cell v-else class="rounded-[4px]" title="退出" v-ripple @click="signOut">
              <template #icon>
                <var-icon class="mr-[20px]" name="power" />
              </template>
            </var-cell>
            <var-divider />
            <var-cell class="rounded-[4px]" :title="$t('Close')" v-ripple @click="show = false">
              <template #icon>
                <var-icon class="mr-[20px]" name="window-close" />
              </template>
            </var-cell>
          </var-space>
        </div>
      </div>
    </var-popup>
  </div>
</template>
